<template>
  <div class="home">
    <!-- van-nav-bar
                title:标题
                left-text:左边文本内容
                right-text:右边文本内容
                slot="title/left/right"
     -->
    <van-nav-bar>
      <template #left>
        <img
          src="https://xpzll.gitee.io/hmtt-76/img/logo.4653c8be.png"
          style="height:80%;"
          alt=""
        />
      </template>
      <template #right>
        <van-button
          style="height:80%;"
          icon="search"
          round
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <div class="tab-area">
      <van-tabs class="tabs" v-model="currIndex">
        <van-tab :title="item.name" v-for="item in list" :key="item.id">
          <!-- 父传子：
                  传：  子组件标签  :属性名='值'
                  收    子组件内
                      props:{
                        属性名:{
                          type:Number,
                          default:基本数据类型直接定义，复制数据类型()=>复杂数据类型,
                          required:true,必传,
                          validator:(value)=>{
                            return boolean.true:验证通过，false，不通过，报错
                          }
                        }
                      }   
                    特点：单向数据流
                          子组件内对ptops传入的值，栈不可修改  基本数据类型不可修改，复杂数据类型不可修改它的引用地址
                      -->
          <ArticleList :id="item.id"></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- ref处理方式：1：获取dom  2:获取组件实例对象 -->
      <van-icon @click="showEdit" class="icon" name="wap-nav" />
    </div>
    <!-- 频道管理 -->
    <!-- 子传父
          子组件标签  @子组件方法名="父组件方法名"
          子组件内：
             this.$emit('子组件方法名'，实参)
     -->
    <channelEdit
      ref="edit"
      :list="list"
      @addList="addList"
      :currIndex="currIndex"
      @delList="delList"
      @setCurrIndex="setCurrIndex"
    ></channelEdit>
  </div>
</template>
<script>
import { userChannels, userChannelsPut } from '@/api/home'
import ArticleList from './components/articleList'
import channelEdit from './components/channelEdit.vue'
// 浏览器存储：1：localStorage  2:sessionStorage  3:cookie
// js-cookie
// 1：安装   2：导入   3：使用
// cookie.get('key')  获取
// cookie.set('key',value)  设置
// cookie.remove(key)   删除
// 接口存储：前置条件：用户已登录
// 数据修改了，调用接口存储到服务器
// 初始值：调用接口获取
import { setCookie, getCookie } from '@/utils/cookie'

export default {
  components: {
    ArticleList,
    channelEdit
  },
  data () {
    return {
      list: [],
      currIndex: 0
    }
  },
  created () {
    // cookie没有取到的是undefined  localstorage没有取到的是null
    // console.log('activated')
    const _list = getCookie('list')
    if (_list) {
      if (this.$store.state.token.token) {
        this.getData()
      } else {
        this.list = JSON.parse(_list)
      }
    } else {
      this.getData()
    }
  },
  activated () {},
  deactivated () {
    // console.log('deactivated')
  },
  methods: {
    // list修改后的处理
    async saveList () {
      setCookie('list', JSON.stringify(this.list))
      if (this.$store.state.token.token) {
        // map方法：生成一个新数据，return什么那一项的内容就是什么
        const _list = this.list.map((item, index) => {
          return {
            id: item.id,
            seq: index
          }
        })
        // console.log('list', this.list, _list)
        await userChannelsPut({ channels: _list })
      }
    },
    async getData () {
      const res = await userChannels()
      this.list = res.data.data.channels
      this.saveList()
      // console.log('频道列表', res)
    },
    // 频道管理图标点击
    showEdit () {
      this.$refs.edit.show = true
    },
    // list新增方法
    addList (obj) {
      this.list.push(obj)
      this.saveList()
    },
    // list删除方法
    delList (index) {
      this.list.splice(index, 1)
      this.saveList()
    },
    // 修改currIndex
    setCurrIndex (val) {
      // console.log(val)
      this.currIndex = val
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep .van-button--default {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
}
::v-deep .van-button__text {
  color: #fff;
}
.tabs {
  padding-right: 35px;
}
.tab-area {
  position: relative;
  .icon {
    position: absolute;
    right: 0;
    top: 0;
    padding: 6px;
    font-size: 26px;
  }
}
</style>
